<template>
    <div class="GO-drawer" v-loading="loading">
        <div class="drawer-title">
            <span>创建订单</span>
<!--            <a style="float:right;">-->
<!--                <p @click="close_tankuang" style="color: #2d2d2d;font-size: 15px;font-weight: bold;float: right">关闭</p>-->
<!--            </a>-->
        </div>
        <ul class="big-btn-box">
            <li @click="createTeamOrder" class="create-btn">
                <i class="icon"></i>
                <span>创建空白订单</span>
            </li>
            <router-link tag="li" to="/group-order/copy-list" class="copy-btn">
                <i class="icon"></i>
                <span>复制订单</span>
            </router-link>
        </ul>
        <el-tabs class="drawer-tabs" v-model="activeTabName" @tab-click="changeBaseInfoTab">
            <el-tab-pane label="编辑中订单" name="first">
                <!--编辑中订单列表 start-->
                <el-table :data="editOrder.list" style="width: 100%" class="staff-table">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="storeName" label="公司名称" align="center"></el-table-column>
<!--                    <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>-->
                    <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
                    <el-table-column prop="operate" label="操作" width="100" align="center">
                        <template slot-scope="props">
                            <div class="operate-btn">
                                <el-button type="text" size="small" @click="goEditOrderFun(props.row)">编辑</el-button>
                                <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="el-icon-warning" icon-color="#FAAD12" @onConfirm="deleteOrderFun(props.row, 4)" title="确定删除该条记录？">
                                    <el-button slot="reference" type="text" size="small">删除</el-button>
                                </el-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-if="editOrder.list.length" background layout="prev, pager, next" :total="editOrder.pageTotal" :current-page.sync="editOrder.pageNo" :page-size="editOrder.pageSize" @current-change="pageChangePage"></el-pagination>
                <!--编辑中订单列表 end-->
            </el-tab-pane>
            <el-tab-pane label="我的模版" name="second">
                <!--我的模版列表 start-->
                <el-table :data="myOrder.list" style="width: 100%" class="staff-table">
                    <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="orderName" label="模板名称" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="更新时间" align="center"></el-table-column>
                    <el-table-column prop="operate" label="操作" width="180" align="center">
                        <template slot-scope="props">
                            <div class="operate-btn">
                                <el-button type="text" size="small" @click="useMyTemplate(props.row)">使用模版</el-button>
                                <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="el-icon-warning" icon-color="#FAAD12" @onConfirm="deleteOrderFun(props.row, 3)" title="确定删除该条记录？">
                                    <el-button slot="reference" type="text" size="small">删除</el-button>
                                </el-popconfirm>
                                <el-button type="text" size="small" @click="setMyTemplateSort(props.row)">设置排序</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-if="myOrder.list.length" background layout="prev, pager, next" :total="myOrder.pageTotal" :current-page.sync="myOrder.pageNo" :page-size="myOrder.pageSize" @current-change="pageChangePage"></el-pagination>
                <!--我的模版列表 end-->
            </el-tab-pane>
            <el-tab-pane label="铭朗云模版" name="third">
                <!--铭朗云模版列表 start-->
                <el-table :data="lyOrder.list" style="width: 100%" class="staff-table">
                    <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="orderName" label="模板名称" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="更新时间" align="center"></el-table-column>
                    <el-table-column prop="operate" label="操作" width="100" align="center">
                        <template slot-scope="props">
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-if="lyOrder.list.length" background layout="prev, pager, next" :total="lyOrder.pageTotal" :current-page.sync="lyOrder.pageNo" :page-size="lyOrder.pageSize" @current-change="pageChangePage"></el-pagination>
                <!--铭朗云模版列表 end-->
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="设置排序" :visible.sync="myTemplateSortDialog" width="480px" :close-on-click-modal="false" :modal="false">
            <el-form label-width="100px" class="fabric-form">
                <el-form-item label="排序编号：" required>
                    <el-input v-model="sortNumber" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item class="form-btn-area">
                    <el-button @click="myTemplateSortDialog = false">取 消</el-button>
                    <el-button type="primary" @click="enterSetSort">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    let storage = window.localStorage;
    import { query_TeamOrderlistBytype, create_team_order, previewOrder, getDepartByCuID, deleteBytype, update_team_templateInfo, use_teamTemplateInfo_CreatOrder, query_customerInfoById } from '@/api/group-order';
    export default {
        name: 'groupOrderDrawer',
        data() {
            return {
                loading:false,
                is_tan:false,
                activeTabName: 'first',
                myTemplateSortDialog: false,
                activeItem: null,
                editOrder: {
                    type: 1,
                    list: [],
                    pageNo: 0,
                    pageTotal: 0,
                    pageSize: 5
                },
                myOrder: {
                    type: 2,
                    list: [],
                    pageNo: 0,
                    pageTotal: 0,
                    pageSize: 5
                },
                lyOrder: {
                    type: 3,
                    list: [],
                    pageNo: 0,
                    pageTotal: 0,
                    pageSize: 5
                },
                sortNumber: 0,
                editItem: null
            };
        },
        created() {
            let that = this;
            that.activeItem = that.editOrder;
            // 请求订单列表
            that.getTeamOrderlistBytype();
        },
        methods: {
            close_tankuang(){
                // alert(this.is_tan)
                // this.groupOrderDrawer=false;
                // this.$router.replace({
                //     path:'/',
                //     name:'home'
                // })
            },
            /**
             * @Date: 2020-11-07 21:40:55
             * @LastEditors: qwguo
             * @description: 切换标签
             * @param {type} 参数说明
             * @return: 返回值
             */
            changeBaseInfoTab() {
                switch (this.activeTabName) {
                    case 'first':
                        this.activeItem = this.editOrder;
                        break;
                    case 'second':
                        this.activeItem = this.myOrder;
                        break;
                    case 'third':
                        this.activeItem = this.lyOrder;
                        break;
                }
                if (!this.activeItem.loaded) {
                    this.getTeamOrderlistBytype();
                }
            },
            /**
             * @Date: 2020-11-07 21:27:23
             * @LastEditors: qwguo
             * @description: 获取数据
             * @param {type} 参数说明
             * @return: 返回值
             */
            getTeamOrderlistBytype() {
                let that = this;
                that.activeItem.list.splice(0, that.activeItem.list.length);
                query_TeamOrderlistBytype({
                    token: storage.getItem('token'),
                    type: that.activeItem.type,
                    pageNo: that.activeItem.pageNo,
                    pageSize: that.activeItem.pageSize
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        that.activeItem.loaded = true;
                        let getData = res.data.data;
                        that.activeItem.pageTotal = getData.total;
                        getData.records.forEach(v => {
                            that.activeItem.list.push(v);
                        });
                    }
                });
            },
            /**
             * @Date: 2020-11-07 21:17:10
             * @LastEditors: qwguo
             * @description: 更改我的模板页码
             * @param {type} 参数说明
             * @return: 返回值
             */
            pageChangePage(index) {
                this.activeItem.pageNo = index;
                this.getTeamOrderlistBytype();
            },
            /**
             * @Date: 2020-11-07 21:57:44
             * @LastEditors: qwguo
             * @description: 创建空白订单
             * @param {type} 参数说明
             * @return: 返回值
             */
            createTeamOrder() {
                create_team_order({
                    token: storage.getItem('token')
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        storage.setItem('orderSn', res.data.orderSn);
                        storage.removeItem('groupOrder_companyFrom');
                        storage.removeItem('groupOrder_baseFrom');
                        storage.removeItem('customerId');
                        this.$router.push('/group-order');
                    }
                });
            },
            /**
             * @Date: 2020-11-16 01:12:27
             * @LastEditors: qwguo
             * @description: 取编辑订单
             * @param {type} 参数说明
             * @return: 返回值
             */
            goEditOrderFun(row) {
                this.loading=true;
                storage.removeItem('groupOrder_baseFrom');
                storage.removeItem('customerId');
                storage.removeItem('groupOrder_companyFrom');
                let that = this;
                let baseForm = {
                    address: '',
                    addressType: '',
                    businessSource: 0,
                    courierId: 0,
                    fabricSource: 0,
                    orderId: '',
                    orderName: '',
                    packageType: 0,
                    storeCode: '',
                    storeId: 0
                };
                previewOrder({
                    orderSn: row.orderSn
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        let getData = res.data.data;
                        storage.setItem('orderSn', row.orderSn);
                        for (let k in baseForm) {
                            baseForm[k] = isNaN(getData[k] * 1) ? getData[k] : getData[k] * 1;
                        }
                        storage.setItem('groupOrder_baseFrom', JSON.stringify(baseForm));
                        storage.setItem('customerId', getData.customerId);
                        if (getData.customerId) {
                            query_customerInfoById({
                                // token: storage.getItem('token'),
                                customerId: getData.customerId
                            }).then(res => {
                                if (res.status == 200 && res.data.code == 0) {
                                    let getData_1 = res.data.data;
                                    storage.setItem('groupOrder_companyFrom', JSON.stringify(getData_1));
                                }
                                that.$router.push('/group-order');
                            });
                        } else {
                            that.$router.push('/group-order');
                        }
                        this.loading=false;
                    }else {
                        this.loading=false;
                    }
                });

                // this.$router.push('/group-order');
            },
            /**
             * @Date: 2020-11-18 20:04:49
             * @LastEditors: qwguo
             * @description: 删除列表方法
             * @param {type} 参数说明
             * @return: 返回值
             */
            deleteOrderFun(row, type) {
                let that = this;
                deleteBytype({
                    token: storage.getItem('token'),
                    order_sn: row.orderSn,
                    type
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        that.$message.success('删除成功');
                        switch (type) {
                            case 4:
                                that.activeItem = that.editOrder;
                                break;
                            case 3:
                                that.activeItem = that.myOrder;
                                break;
                        }
                        that.getTeamOrderlistBytype();
                    } else {
                        that.$message.warning(res.data.msg);
                    }
                });
                /*that.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {

                    })
                    .catch(() => {});*/
            },
            /**
             * @Date: 2020-11-18 20:08:13
             * @LastEditors: qwguo
             * @description: 使用我的模版
             * @param {type} 参数说明
             * @return: 返回值
             */
            useMyTemplate(row) {
                this.loading=true;
                let that = this;
                use_teamTemplateInfo_CreatOrder({
                    token: storage.getItem('token'),
                    orderSn: row.orderSn
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        that.goEditOrderFun({
                            orderSn: res.data.orderSn
                        });
                    }
                    this.loading=false;
                });
            },
            /**
             * @Date: 2020-11-18 20:08:01
             * @LastEditors: qwguo
             * @description: 设置模版排序
             * @param {type} 参数说明
             * @return: 返回值
             */
            setMyTemplateSort(row) {
                this.sortNumber = row.numbers;
                this.editItem = row;
                this.myTemplateSortDialog = true;
            },
            /**
             * @Date: 2020-11-19 12:34:29
             * @LastEditors: qwguo
             * @description: 确定排序
             * @param {type} 参数说明
             * @return: 返回值
             */
            enterSetSort() {
                let that = this;
                if (that.sortNumber !== 0 && !that.sortNumber) {
                    that.$message.info('请输入正确的排序值');
                    return;
                }
                update_team_templateInfo({
                    token: storage.getItem('token'),
                    orderSn: that.editItem.orderSn,
                    numbers: that.sortNumber
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        that.$message.success('设置成功');
                        that.getTeamOrderlistBytype();
                        that.myTemplateSortDialog = false;
                    } else {
                        that.$message.warning('设置失败');
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
    .GO-drawer {
        padding: 20px;
        overflow-y: auto;
        .drawer-title {
            height: 27px;
            border-left: 5px solid #6f6f6f;
            display: flex;
            align-items: center;
            margin: 0 0 20px 0;
            font-weight: 400;

            span {
                margin-left: 24px;
                font-size: 15px;
            }
        }
        .big-btn-box {
            display: flex;
            padding: 20px 0;
            border-bottom: 1px dashed #ccc;
            margin-bottom: 20px;
            li {
                cursor: pointer;
                width: 196px;
                height: 207px;
                background-color: rgba(240, 240, 240, 1);
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                border-radius: 5px;
                margin-right: 10px;
                .icon {
                    width: 71px;
                    height: 71px;
                    position: relative;
                    margin-bottom: 15px;
                    &::after,
                    &::before {
                        content: '';
                        position: absolute;
                    }
                }
                span {
                    font-size: 16px;
                    color: #333;
                }
                &.create-btn {
                    .icon {
                        &::after,
                        &::before {
                            background-color: #b9b9b9;
                            border-radius: 4px;
                        }
                        &::after {
                            width: 100%;
                            height: 8px;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                        &::before {
                            height: 100%;
                            width: 8px;
                            top: 0;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }
                    &:hover {
                        .icon {
                            &::after,
                            &::before {
                                background-color: rgba(255, 231, 71, 1);
                            }
                        }
                    }
                }
                &.copy-btn {
                    .icon {
                        width: 60px;
                        height: 60px;
                        &::after,
                        &::before {
                            border-radius: 5px;
                            box-sizing: border-box;
                            width: 100%;
                            height: 100%;
                            border: 6px solid #b9b9b9;
                            background-color: rgba(240, 240, 240, 1);
                        }
                        &::after {
                            left: 0;
                            top: 0;
                        }
                        &::before {
                            top: -15px;
                            left: 15px;
                        }
                    }
                    &:hover {
                        .icon {
                            &::after,
                            &::before {
                                background-color: rgba(71, 71, 71, 1);
                                border-color: rgba(255, 231, 71, 1);
                            }
                        }
                    }
                }
                &:hover {
                    background-color: rgba(71, 71, 71, 1);
                    span {
                        color: rgba(255, 231, 71, 1);
                    }
                }
            }
        }
        .staff-table {
            thead {
                th {
                    background-color: #3c3c3c;
                    color: #fcec83;
                    border-right: 1px solid #fff;
                }
            }
            tbody {
                td {
                    background-color: #f9f9f9;
                    border-right: 1px solid #fff;
                }
            }
            .operate-btn {
                .el-button {
                    color: #c8a42a;
                    margin: 0 3px;
                }
            }
        }
        .el-pagination {
            padding-top: 20px;
            text-align: center;
        }
        .drawer-tabs {
            .el-tabs__item {
                outline: none;
                &:focus.is-focus {
                    box-shadow: none;
                }
            }
        }
    }
</style>
